<template>
	<view class="loginBox">
		<view class="loginBg"></view>
		<view class="signin">
			<view class="logoTitle">客服助手</view>
			<uni-forms :value="formData" ref="form">
				<input v-show="modifyUrl" class="loginInput" v-model="formData.domain" placeholder="服务器地址, http://或https://开头" />
				<input class="loginInput" v-model="formData.username" placeholder="请输入用户名" />
				<input class="loginInput" type="password" password  v-model="formData.password" placeholder="请输入密码" />
			
				<button class="loginBtn" size="small" :disabled="formData.username=='' || formData.password==''"  @click="submitForm" type="primary">登录</button>
				<view class="modifyUrl" @click="modifyUrl=true">修改域名</view>
			</uni-forms>
		</view>
		
	</view>
</template>

<script>
	import toolsHelper from '../../common/tools.js';
	export default {
		data() {
			return {
				formData: {
					username: '',
					password: '',
					domain:''
				},
				timer: null,
				modifyUrl:false,
			}
		},
		onLoad() {
		},
		// 页面显示
		onShow() {
			let pages = getCurrentPages();
			if(pages.length>1){
				window.location.reload();
			}
			
			let domainInfo = uni.getStorageSync('domain');
			if (domainInfo&&domainInfo.domain!="") {
				this.formData.domain=domainInfo.domain;
			}
			if(this.formData.domain==""){
				this.formData.domain=toolsHelper.getBaseUrl();
			}
		},
		methods: {
			submitForm(form) {
				let domain=toolsHelper.trim(this.formData.domain,"/");
				this.$refs.form.submit().then((res) => {
					if(this.formData.username==""||this.formData.username==""){
						uni.showModal({
							content: "请输入用户名或密码"
						});
						return;
					}
					uni.showLoading({
						title: '验证中...'
					});
					let _this = this;
					uni.request({
						url: domain + '/check',
						method: 'POST',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						data: {
							username: this.formData.username,
							password: this.formData.password
						},
						fail:function(res){
							uni.showModal({
								content: res
							});
						},
						
						success: function(res) {
							uni.hideLoading();
							var code = res.data.code;
							if(!code){
								uni.showToast({
								  title: '请求错误',
								  duration: 3000,
								  icon: 'none'
								});
							}else if (code != 200) {
								uni.showToast({
								  title: res.data.msg,
								  duration: 3000,
								  icon: 'none'
								});
							} else {
								uni.setStorageSync("app", {
									token: res.data.result.token,
								});
								uni.setStorageSync("domain", {
									domain:domain
								});
								uni.switchTab({
									url: '/pages/index/index'
								});
							}
						}
					});
				})
			}
		}
	}
</script>

<style>
	.logo{
		width: 80px;
		height: 80px;
		margin: 0 auto;
		display: block;
		margin-top: 50px;
	}
	.logoTitle{
		font-size: 22px;
		text-align: center;
		font-style: normal;
		color: #333;
		margin-top: 10px;
		margin-bottom: 30px;
	}
	.loginBox{
		width: 100%;
		height: 100%;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.loginBg{
		background: #3b8aff;
		width: 100%;
		height: 55%;
		top: 0;
		position: fixed;
		z-index: 0;
	}
	.signin{
		margin: 0 auto;
		width: 70%;
		background-color: #fff;
		box-shadow: none;
		padding: 20px;
		border-radius: 10px;
		z-index: 2;
		box-shadow: 0px 3px 20px rgb(0 20 41 / 6%);
	}
	.loginInput {
		font-size: 14px;
		padding: 10px;
		margin-bottom: 20px;
		border-bottom:1px solid #e3e3e3;
		color: #686868;
	}
	.loginBtn{
		border-radius: 26px;
		font-size: 14px;
		padding: 6px 0px;
		background: linear-gradient(90deg, #3875EA 0%, #1890FC 100%);
		color: #fff;
	}
	.modifyUrl{
		font-size: 12px;
		padding-top: 20px;
		text-align: center;
	}
</style>
